<template>
	<view>
		<view class="cu-custom">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333333',
				background: headerOpacity > 0?'url('+ backgroundImg+ ')':'none'
			}">
				<view class="action white" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="content text-bold white" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					超值优惠
				</view>
			</view>
		</view>
		<view class="new">
			<wanl-banner interval='5000' :banner="banner" img="media" link="url" height="728rpx"
				:StyleSheet="StyleSheet" @onchange="onchange" borderRadius='0' :indicatorDots='false' />

			<view class="listBox">
				<image src="/static/shop/biaotou.png" class="listBoxImg"></image>
				<view class="listBoxCenter">
					<view class="list">
						<view class="listTitle">
							<view class="listTitleHx"></view>
							<view class="listTitleText">优惠榜单</view>
							<view class="listTitleHx"></view>
						</view>
						<view class="listItem" v-for="(item,index) in list" :key="index" @click="jump(item.id)">
							<view class="listItemFlex">
								<image :src="$wanlshop.oss(item.image)" mode="widthFix" class="listItemFlexImg"></image>
								<view class="listItemFlexRight">
									<view class="listItemFlexTitle">{{item.title}}</view>
									<view class="listItemFlexBtm">
										<view class="listItemFlexBtmText">￥{{ item.price }}</view>
										<view class="listItemFlexBtmBtn">立即抢购</view>
									</view>
								</view>
							</view>
						</view>
						<block v-if="list.length === 0 && status !== 'loading'">
							<wanl-empty :text="empty" />
						</block>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				StyleSheet: {
					margin: 0
				},
				current: 0,
				backgroundImg: '',
				headerOpacity: 0,
				list: [],
				params: {
					page: 1
				},
				empty: '暂无商品',
				reload: true, //判断是否上拉
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				},
			}
		},
		onLoad() {
			this.loadBanner()
			this.loadData()
		},
		// 下拉刷新
		onReachBottom() {
			if (this.params.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.params.page = this.params.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		onPageScroll(e) {
			let tmpY = 50;
			e.scrollTop = e.scrollTop > tmpY ? 50 : e.scrollTop; //如果当前高度大于250则250否则当前高度
			this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
		},
		methods: {
			jump(id) {
				this.$wanlshop.to(`/pages/product/goods?id=${id}`);
			},
			//异步加载商品列表
			async loadBanner() {
				await uni.request({
					url: '/publics/advert/content',
					data: {
						position: 'preferential_banner'
					},
					method: 'POST',
					success: res => {
						console.log("banner", res)
						this.banner = res.data
						this.backgroundImg = this.$wanlshop.oss(res.data[0].media)
						console.log(this.backgroundImg)
					}
				});

			},
			async loadData() {
				await uni.request({
					url: '/wanlshop/product/preferential',
					data: this.params,
					method: 'POST',
					success: res => {
						console.log("czxczcz", res)
						this.status = 'more';
						this.list = this.reload ? res.data.data : this.list.concat(res.data
							.data); //数据 追加
						if (res.data.data.length == 0) {
							this.empty = `暂无商品`;
						}
						this.params.page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						console.log("this.list", this.list)
					}
				});

			},
			onchange(e) {
				console.log(e)
				this.current = e.detail.current
				console.log(this.banner[this.current].media)
				this.backgroundImg = this.$wanlshop.oss(this.banner[e.detail.current].media)
				console.log(this.backgroundImg)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fb6451;
	}

	.cu-bar {
		background-size: 100% !important;
		background-repeat: no-repeat !important;
	}

	.new {
		.listBox {
			width: 100%;
			height: auto;
			position: sticky;
			z-index: 10;
			margin-top: -100rpx;

			.listBoxImg {
				width: 694rpx;
				height: 50rpx;
				margin: 0 auto;
				display: block;
			}
			.listBoxCenter {
				padding: 0 45rpx;
				.list {
					width: 100%;
					height: auto;
					background: #ffffff;
					padding-bottom: 20rpx;
					
					.listTitle {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 40rpx;
						.listTitleHx{
							width: 70rpx;
							height: 1rpx;
							background: #FB6451;
						}
						.listTitleText{
							font-size: 36rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FB6451;
							margin:0 30rpx;
						}
					}
					
					
					
				}
				.listItem{
					padding:  0 40rpx;
					.listItemFlex{
						width: 100%;
						height: 157rpx;
						background: #FFF1F1;
						border: 1px solid #ED3017;
						border-radius: 8rpx;
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						.listItemFlexImg{
							width: 96rpx;
							height: 96rpx;
							margin-left: 20rpx;
						}
						.listItemFlexRight{
							width: 409rpx;
							height: auto;
							margin-left: auto;
							margin-right: 20rpx;
							.listItemFlexTitle{
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #FF8171;
								overflow: hidden;
								text-overflow: ellipsis;
								-webkit-line-clamp: 2;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								line-break: anywhere;
							}
							
							.listItemFlexBtm{
								display: flex;
								align-items: center;
								margin-top: 16rpx;
								.listItemFlexBtmText{
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: bold;
									color: #333333;
								}
								.listItemFlexBtmBtn{
									width: 140rpx;
									height: 36rpx;
									background: #FB6451;
									border-radius: 18rpx;
									margin-left: auto;
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: bold;
									color: #FFFFFF;
									text-align: center;
								}
							}
						}
					}
				}
			}
			
		}
	}
</style>